<template>
  <div class="app-container d-flex">
    <div class="h-6 w-7">
      <!-- 宿舍区 能耗分布 -->
      <div class="h-2 w-100 p-2">
        <div class="h-100 w-100 d-flex item_border p-2">
          <div class="h-100 w-50 pt-2">
            <div class="item_title pl-2">
              <div class="d-flex align-items-center">
                <div class="success_point"></div>
                <div class="font-white font-14">宿舍区能耗分布</div>
              </div>
            </div>
            <div class="item_content p-2 pt-3">
              <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                <div class="h-100 width_12 item_bg_color"></div>
                <div class="h-100 width_calc12 d-flex flex-column justify-content-between p-3">
                  <div class="font-white font-16">总能耗</div>
                  <div class="font-white-impact text-center font-64">{{$formatNumber2(oneCarData1.deviceValue)}}</div>
                  <div class="font-white font-14 text-right">单位：kW·h</div>
                </div>
              </div>
            </div>
          </div>
          <div class="h-100 w-50">
            <div class="height-33 w-100 p-2" v-for="(item,index) in oneCarData2" :key="index">
              <div class="h-100 w-100 d-flex item_bg_color2 borderRadius4 over-hidden">
                <div class="h-100 width_62 font-white font-48 d-flex-center" :class="oneCarDataStatus[index]">{{index + 1}}
                </div>
                <div class="h-100 width_calc62 d-flex-center-jb p-2 pl-3">
                  <div class="font-white-impact text-center font-40">{{$formatNumber2(item.deviceValue)}}</div>
                  <div class="font-white font-14 pt-3">单位：kW·h</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 各楼层能耗分析 -->
      <div class="h-4 w-100">
        <div class="height-33 w-100 p-2">
          <div class="h-100 w-100 item_border d-flex p-2">
            <div class="color1 font-96 d-flex-center">1</div>
            <div class="d-flex-center-jb flex-2">
              <div class="h-100 width-20 ml-3 mr-2 item_bg_success borderRadius4 over-hidden"
                   v-for="(item,index) in threeCardData" :key="index">
                <div class="h-100 w-100 d-flex flex-column justify-content-around p-2">
                  <div class="font-white font-14">{{index + 1}}层</div>
                  <div class="font-white-impact text-center font-36">{{$formatNumber2(item.deviceValue)}}</div>
                  <div class="font-white font-14 text-right">单位：kW·h</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="height-33 w-100 p-2">
          <div class="h-100 w-100 item_border d-flex p-2">
            <div class="color2 font-96 d-flex-center">2</div>
            <div class="d-flex-center-jb flex-2">
              <div class="h-100 width-20 ml-3 mr-2 item_bg_warning borderRadius4 over-hidden"
                   v-for="(item,index) in fourCarData" :key="index">
                <div class="h-100 w-100 d-flex flex-column justify-content-around p-2">
                  <div class="font-white font-14">{{index + 1}}层</div>
                  <div class="font-white-impact text-center font-36">{{$formatNumber2(item.deviceValue)}}</div>
                  <div class="font-white font-14 text-right">单位：kW·h</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="height-33 w-100 p-2">
          <div class="h-100 w-100 item_border d-flex p-2">
            <div class="color3 font-96 d-flex-center">3</div>
            <div class="d-flex-center-jb flex-2">
              <div class="h-100 width-20 ml-3 mr-2 item_bg_primary borderRadius4 over-hidden"
                   v-for="(item,index) in fiveCardData" :key="index">
                <div class="h-100 w-100 d-flex flex-column justify-content-around p-2">
                  <div class="font-white font-14">{{index + 1}}层</div>
                  <div class="font-white-impact text-center font-36">{{$formatNumber2(item.deviceValue)}}</div>
                  <div class="font-white font-14 text-right">单位：kW·h</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-6 w-5">
      <!-- 宿舍区 设备能耗占比 -->
      <div class="h-3 w-100 p-2">
        <div class="h-100 w-100 item_border p-2">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区设备能耗占比</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="pie-first"></div>
          </div>
        </div>
      </div>
      <!-- 宿舍区 设备能耗占比 -->
      <div class="h-3 w-100 p-2">
        <div class="h-100 w-100 item_border p-2">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区设备能耗占比</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 pt-3" id="bar-first"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryOneListEnemyByNum,
    queryThreeListEnemyByNum,
    queryFourListEnemyByNum,
    queryFiveListEnemyByNum,
    querySixListEnemyByReport,
    querySevenListEnemyByReport,
  } from "@/api/electrician/collect/energyAnalysis"

  export default {
    components: {},
    data() {
      return {
        line_one: require('@/assets/img/line_one.png'),
        cz_info: require('@/assets/img/cz_info.png'),
        kt_info: require('@/assets/img/kt_info.png'),

        timeout: [],

        oneCarData1: {deviceValue: '0.0'},
        oneCarData2: [],
        oneCarDataStatus: ['item_bg_success', 'item_bg_warning', 'item_bg_primary'],

        threeCardData: [],
        fourCarData: [],
        fiveCardData: [],

        sixCardData: [],
        sevenCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
          seriesData4: [],
        },
      }
    },
    created() {
    },
    mounted() {
      this.queryOneListEnemyByNum()
      this.queryThreeListEnemyByNum()
      this.queryFourListEnemyByNum()
      this.queryFiveListEnemyByNum()
      this.querySixListEnemyByReport()
      this.querySevenListEnemyByReport()

      let _this = this;
      this.timeout[0] = setInterval(() => {
        _this.queryOneListEnemyByNum()
        _this.queryThreeListEnemyByNum()
        _this.queryFourListEnemyByNum()
        _this.queryFiveListEnemyByNum()
        _this.querySixListEnemyByReport()
        _this.querySevenListEnemyByReport()
      }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryOneListEnemyByNum() {
        queryOneListEnemyByNum().then(res => {
          let tempData = res.object
          let count = ""
          count = (Number(tempData[0].deviceValue) + Number(tempData[1].deviceValue) + Number(tempData[2].deviceValue)) == 0 ? '0.0' : (this.$formatNumber2(tempData[0].deviceValue) + this.$formatNumber2(tempData[1].deviceValue) + this.$formatNumber2(tempData[2].deviceValue)).toFixed(2)
          this.oneCarData2 = tempData
          this.oneCarData1.deviceValue = count
        })
      },
      queryThreeListEnemyByNum() {
        queryThreeListEnemyByNum().then(res => {
          let tempData = res.object
          this.threeCardData = tempData
        })
      },
      queryFourListEnemyByNum() {
        queryFourListEnemyByNum().then(res => {
          let tempData = res.object || []
          this.fourCarData = tempData
        })
      },

      queryFiveListEnemyByNum() {
        queryFiveListEnemyByNum().then(res => {
          let tempData = res.object || []
          this.fiveCardData = tempData
        })
      },
      querySixListEnemyByReport() {
        querySixListEnemyByReport().then(res => {
          let tempData = res.object || []
          let tempData2 = []
          for (let i = 0; i < tempData.length; i++) {
            tempData2.push({
              value: this.$formatNumber2(tempData[i].yValue),
              name: tempData[i].xValue,
            })
          }

          this.sixCardData = tempData2

          charts.pieEchart('pie-first', this.sixCardData)
        })
      },
      querySevenListEnemyByReport() {
        querySevenListEnemyByReport().then(res => {
          let tempData = res.object || []

          let xData = []
          let seriesData1 = []
          let seriesData2 = []
          let seriesData3 = []
          let seriesData4 = []
          for (let i = 0; i < tempData.length; i++) {
            xData.push(tempData[i].xValue)

            let arr = tempData[i].yValue.split(',')
            seriesData1.push(this.$formatNumber2(arr[0]))
            seriesData2.push(this.$formatNumber2(arr[1]))
            seriesData3.push(this.$formatNumber2(arr[2]))
            seriesData4.push(this.$formatNumber2(arr[3]))
          }

          this.sevenCardData.xData = xData
          this.sevenCardData.seriesData1 = seriesData1
          this.sevenCardData.seriesData2 = seriesData2
          this.sevenCardData.seriesData3 = seriesData3
          this.sevenCardData.seriesData4 = seriesData4

          charts.barEchart('bar-first', this.sevenCardData)
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .height-33 {
    height: 33.33%;
  }

  .width-55 {
    width: 55%;
  }

  .width-45 {
    width: 45%;
  }

  .width-20 {
    width: 20%;
  }

  .width_12 {
    width: 12px;
  }

  .width_calc12 {
    width: calc(100% - 12px);
  }

  .width_62 {
    width: 62px;
  }

  .width_calc62 {
    width: calc(100% - 62px);
  }

  .item_bg_success {
    background-color: #1E8045;
  }

  .item_bg_warning {
    background-color: #4C5CA8;
  }

  .item_bg_primary {
    background-color: #C3951C;
  }

  .item_bg_color {
    background-color: #39C5C5;
  }

  .item_bg_color2 {
    background-color: rgba(10, 52, 61, 0.62);
  }

  .color1 {
    color: #1E8045;
  }

  .color2 {
    color: #4C5CA8;
  }

  .color3 {
    color: #C3951C;
  }

  .borderRadius4 {
    border-radius: 4px;
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }

  .font-96 {
    font-size: 96px;
  }

  .font-64 {
    font-size: 64px;
  }

  .font-48 {
    font-size: 48px;
  }

  .font-40 {
    font-size: 40px;
  }

  .font-white-impact {
    font-family: Impact, Impact-400;
    font-weight: 500;
    color: #ffffff;
  }
</style>
